<template>
	<view class="main">
		<uni-segmented-control class="tabs" :current="index" :values="tabList" styleType="text"
			activeColor="#4DBEC1" @clickItem="changeTab"></uni-segmented-control>
		<view class="list">
			<courseList :courseList="courseList" :islearning="index == 0" :islearnHistory="index == 1"></courseList>
		</view>
	</view>
</template>

<script>
	import courseList from "../../components/courseList/courseList.vue"
	export default {
		data() {
			return {
				tabList:["正在学习","学习历史"],
				index:0,
				learn:[],
				token:"",
				learnList:[],
				historyList:[],
				courseList:[],
				page:1,
				total:0
			}
		},
		components:{courseList},
		onReachBottom() {
			if(this.index == 0){
				return
			}
			let _self = this
			console.log(this.total == this.historyList.length)
			if(this.total == this.historyList.length){
				return
			}
			uni.showNavigationBarLoading()
			setTimeout(function() {
				_self.page++;
				_self.getHistory()
				uni.hideNavigationBarLoading()
			}, 500);
		},
		methods: {
			changeTab(data){
				this.index = data.currentIndex
				if(this.index == 0){
					this.courseList = this.learnList
				}else{
					this.courseList = this.historyList
					console.log(this.historyList)
				}
			},
			//正在学习
			getLearn(){
				this.$httpRequest({
					url:"app/api/getcourseContent.php",
					method:"POST",
					data:{
						service:"moodle_mobile_app",
						classification:"inprogress",
						wstoken:this.token,
						page:"1"
					}
				}).then(res=>{
					this.learnList = res.courseArr
					this.courseList = this.learnList
				})
			},
			// 学习历史
			getHistory(){
				this.$httpRequest({
					url:"app/api/getcourseContent.php",
					method:"POST",
					data:{
						service:"moodle_mobile_app",
						classification:"",
						wstoken:this.token,
						page:this.page
					}
				}).then(res=>{
						// this.learnList = res.courseArr
					this.historyList = [...this.historyList,...res.courseArr]
					this.courseList = this.historyList
					this.total  = res.total
				})
			}
		},
		onLoad() {
			this.token = JSON.parse(uni.getStorageSync('token')).token
			this.getLearn()
			this.getHistory()
		}
	}
</script>

<style lang="scss" scoped>
.main{
		width: 90%;
		margin: 0 auto;
	.tabs {
		::v-deep .segmented-control__text {
			font-size: 28rpx !important;
	
		}
	}
	.list{
		margin-top: 20rpx;
	}
}
</style>
